<!--  -->
<template>
  <div class="management">
    <div class="details">
      <div class="nums">
        <div class="txt">
          <h4>项目数</h4>
          <i class="el-icon-info"></i>
        </div>
        <ul class="numone">
          <li>
            <h3>130</h3>
            <span>固定资产投资</span>
          </li>
          <li>
            <h3>60</h3>
            <span>非固定资产投资</span>
          </li>
        </ul>
      </div>
      <div class="condition">
        <div class="txt">
          <h4>项目状态（个）</h4>
          <i class="el-icon-info"></i>
        </div>
        <ul class="numtwo">
          <li>
            <h3>34</h3>
            <span>在谈</span>
          </li>
          <li>
            <h3>17</h3>
            <span>已签约</span>
          </li>
          <li>
            <h3>17</h3>
            <span>开工</span>
          </li>
          <li>
            <h3>2</h3>
            <span>建成</span>
          </li>
        </ul>
      </div>
      <div class="source">
        <div class="txt">
          <h4>项目来源构成</h4>
          <i class="el-icon-info"></i>
        </div>
      </div>
    </div>
    <div class="operation">
      <div class="allshead">
        <div class="inpts">
          <el-input placeholder="请输入内容" class="input-with-select sercher">
            <el-button slot="append" icon="el-icon-search" class="bigs"></el-button>
          </el-input>
          <el-button class="clears">清 除</el-button>
        </div>
        <div class="btns">
          <el-button type="info">自定义列</el-button>
          <el-button type="info">批量导入</el-button>
          <el-button type="info">批量导出</el-button>
          <el-button type="primary">+新建项目</el-button>
        </div>
      </div>
      <div class="main">
        <el-table ref="filterTable" :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="项目名称" width="320"> </el-table-column>
          <el-table-column
            prop="types"
            label="项目类型"
            width="130"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{
                scope.row.types
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="承接平台"
            width="130"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              {{ scope.row.address }}
            </template>
          </el-table-column>
          <el-table-column
            prop="lei"
            label="事项分类"
            width="150"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              {{ scope.row.lei }}
            </template>
          </el-table-column>
          <el-table-column
            prop="way"
            label="招商方式"
            width="130"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              {{ scope.row.way }}
            </template>
          </el-table-column>
          <el-table-column
            prop="holds"
            label="已通过"
            width="130"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              {{ scope.row.holds }}
            </template>
          </el-table-column>
          <el-table-column
            prop="nums"
            label="投资金额"
            width="130"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              {{ scope.row.nums }}
            </template>
          </el-table-column>
          <el-table-column
            prop="s"
            label="建设面积"
            width="130"
            :filters="[
              { text: '家', value: '家' },
              { text: '公司', value: '公司' },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              {{ scope.row.s }}
            </template>
          </el-table-column>
          <el-table-column  label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [
        {
          nums: '1500万',
          name: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          address: '某某园区 ',
          types: '一产',
          lei: '固定资产投资',
          way: '自主招商',
          holds: '已通过',
          s: '46090平米',
        },
        {
          nums: '1500万',
          name: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          address: '某某园区 ',
          types: '二产',
          lei: '固定资产投资',
          way: '自主招商',
          holds: '已通过',
          s: '46090平米',
        },
        {
          nums: '1500万',
          name: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          address: '某某园区 ',
          types: '三产',
          lei: '固定资产投资',
          way: '自主招商',
          holds: '已通过',
          s: '46090平米',
        },
        {
          nums: '1500万',
          name: '三王山大酒店商业综合体休闲娱乐项目休闲…',
          address: '某某园区 ',
          types: '一产',
          lei: '固定资产投资',
          way: '自主招商',
          holds: '已通过',
          s: '46090平米',
        },
      ],
    }
  },
  created() {},
  methods: {
    handleClick(row) {
      console.log(row)
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    formatter(row, column) {
      return row.address
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
  beforeDestroy() {},
}
</script>

<style lang='scss' >
.el-input-group > .el-input__inner {
  vertical-align: middle;
  display: table-cell;
  height: 42px;
}
*{
  margin: 0;
  padding: 0;
}
.management {
  width: 100%;
  .details {
    height: 183px;
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    .nums {
      height: 183px;
      background: #fff;
      display: flex;
      flex: 1;
      margin-right: 20px;
      flex-wrap: wrap;
      .txt {
        margin: 14px 20px 39px;
        height: 22px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        h4 {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
        }
      }
      .numone {
        width: 100%;
        text-align: center;
        display: flex;
        height: 65px;
        justify-content: space-evenly;
        span {
          font-size: 12px;
          opacity: 0.5;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #0f1b41;
        }
    
        li {
          h3 {
            font-size: 24px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;

            color: #2574ff;
          }
        }
      }
    }
    .condition {
      height: 183px;
      background: #fff;
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      margin-right: 20px;
      .txt {
        width: 100%;
        margin: 14px 20px 39px;
        height: 22px;
        display: flex;
        justify-content: space-between;
        h4 {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
        }
      }
      .numtwo {
        width: 100%;
        
        display: flex;
        justify-content: space-evenly;
        flex-grow: 1;
        text-align: center;
         span {
            font-size: 12px;
            opacity: 0.5;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #0f1b41;
          }
        li {
          font-size: 24px;
         

        }
        li:nth-child(1){
          h3{
            color: #975fe4;
          }
        }
        li:nth-child(2){
          h3{
          color: #36cbcb;
          }
        }
        li:nth-child(3){
          h3{
          color: #2e7cff;
          }
        }
        li:nth-child(4){
          h3{
          color: #975fe4;
          }
        }
      }
    }
    .source {
      width: 402px;
      height: 183px;
      background: #fff;
      display: flex;
      flex-wrap: wrap;
      flex: none;
      .txt {
        margin: 14px 20px 39px;
        height: 22px;
        display: flex;
        justify-content: space-between;
        width: 100%;
      }
    }
  }
  .operation {
    width: 100%;
    margin-top: 20px;
    height: 649px;
    background: #fff;
    .allshead {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .inpts {
        margin: 20px 0 0 20px;
        width: 358px;
        height: 42px;
        display: flex;
        align-items: center;
        .clears {
          margin-left: 11px;
        }
        .sercher {
          width: 272px;
          height: 42px;
          .bigs {
            height: 38px;
          }
        }
      }
      .btns {
        margin-top: 20px;
        margin-right: 30px;
      }
    }
    .main {
      width: 100%;
      margin-top: 23px;
    }
    .footer {
      .block {
        width: 100%;
        height: 32px;
        .el-pagination {
          margin: 0 auto;
          height: 32px;
          width: 50%;
        }
      }
    }
  }
}
</style>
